<template>
    <div class="star-mes">
        <van-nav-bar
                title="星空图"
                class="header"
                left-text=""
                left-arrow
                @click-left="jumpPage('/')"
        />
        <van-row style="text-align: center">
            <!-- 卫星数量{{satelliteData.length}} -->
            <!-- {{satelliteData}} -->
            <van-col span="12" class="textHeader borderRight">卫星区域</van-col>
            <van-col span="12" class="textHeader borderLeft">卫星类别</van-col>
<!--            <van-col span="12" class="borderRight">-->
<!--                <van-grid clickable class="typeBorder">-->
<!--                    <van-grid-item text="全部" icon="apps-o" style="flex-basis: 33%;" @click="changeStarField(0)"/>-->
<!--                    <van-grid-item text="全球" icon="cluster-o" style="flex-basis: 33%;" @click="changeStarField(1)"/>-->
<!--                    <van-grid-item text="区域" icon="shield-o" style="flex-basis: 33%;"  @click="changeStarField(2)"/>-->
<!--                </van-grid>-->
<!--            </van-col>-->
<!--            <van-col span="12" class="borderLeft">-->
<!--                <van-grid clickable class="typeBorder">-->
<!--                    <van-grid-item text="全部" icon="apps-o" style="flex-basis: 33%;"  @click="changeStarType(0)"/>-->
<!--                    <van-grid-item text="北二" icon="location-o" style="flex-basis: 33%;"  @click="changeStarType(1)"/>-->
<!--                    <van-grid-item text="北三" icon="shield-o" style="flex-basis: 33%;" @click="changeStarType(2)"/>-->
<!--                </van-grid>-->
<!--            </van-col>-->

            <van-col span="12" class="borderRight">
                <div class="typeBorder otherbtnsbox">
                    <div class="otherbtnitem" @click="changeStarField(0)">
                        <div class="otherbtnimg">
                            <img src='img/star/全部1.png' v-show="this.starField===0" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/全部.png' v-show="this.starField!==0" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">全部</div>
                    </div>
                    <div class="otherbtnitem" @click="changeStarField(1)">
                        <div class="otherbtnimg">
                            <img src='img/star/全球1.png' v-show="this.starField===1" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/全球.png' v-show="this.starField!==1" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">全球</div>
                    </div>
                    <div class="otherbtnitem" @click="changeStarField(2)">
                        <div class="otherbtnimg">
                            <img src='img/star/区域1.png' v-show="this.starField===2" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/区域.png' v-show="this.starField!==2" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">区域</div>
                    </div>
                </div>

            </van-col>
            <van-col span="12" class="borderLeft">
                <div class="typeBorder otherbtnsbox">
                    <div class="otherbtnitem" @click="changeStarType(0)">
                        <div class="otherbtnimg">
                            <img src='img/star/全部1.png' v-show="this.starType===0" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/全部.png' v-show="this.starType!==0" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">全部</div>
                    </div>
                    <div class="otherbtnitem" @click="changeStarType(1)">
                        <div class="otherbtnimg">
                            <img src='img/star/北二1.png' v-show="this.starType===1" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/北二.png' v-show="this.starType!==1" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">北二</div>
                    </div>
                    <div class="otherbtnitem" @click="changeStarType(2)">
                        <div class="otherbtnimg">
                            <img src='img/star/北三1.png' v-show="this.starType===2" style="height: 1.5rem;width: 1.5rem;" alt />
                            <img src='img/star/北三.png' v-show="this.starType!==2" style="height: 1.5rem;width: 1.5rem;" alt />
                        </div>
                        <div class="otherbtnText">北三</div>
                    </div>
                </div>

            </van-col>
        </van-row>
        <div id="myChartStar" style="width: 100%;height: 480px;margin: 2rem 0 0 0"></div>

        <h3 class="vant-header">当前定位系统</h3>

        <div class="vant-table">
            <table cellspacing="0" style="width:100%" class="table">
                <tr>
                    <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
                    <td v-for="(context, i) in option.column" :key="i">{{ item[context.prop] }}</td>
                </tr>
            </table>
        </div>
        <!-- 下部选项条 -->
        <div class="underbox">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="star-o" @click="jumpPage('/star')">星空图</van-tabbar-item>
                <van-tabbar-item icon="bar-chart-o" @click="jumpPage('/linemap')">信号图</van-tabbar-item>
                <van-tabbar-item icon="shrink" @click="jumpPage('/stardata')">俯仰角</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active:0,

                starField:0,
                starType:0,

                myChartStar:null,
                satellite_found:[],
                satellite_use:[],
                satellite_bad:[],

                tableData: [
                    {
                        closedAccount: '良好',
                        givePrice: '军码',
                        noAccount: '单北斗',
                        roomType: "北斗三号",

                    }
                ],
                testData:"",
                //th
                option: {
                    column: [
                        {
                            label: '系统类型',
                            prop: 'roomType'
                        },
                        {
                            label: '卫星信号',
                            prop: 'givePrice'
                        },
                        {
                            label: '可用信号质量',
                            prop: 'closedAccount'
                        },
                        {
                            label: '组合状态',
                            prop: 'noAccount'
                        }
                    ]
                },
                //卫星数据
                satelliteData:"",
            }
        },
        methods: {
            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            changeStarField(mark){
                if(this.starField===mark){
                    console.log(mark);
                }else{
                    this.starField=mark;
                    this.drawStar();
                }

            },
            changeStarType(type){
                if(this.starType===type){
                    console.log(type)
                }else {
                    this.starType=type;
                    this.drawStar();
                }

            },
            getAllStarInfo(){
                let res = $App.getGpsSatelliteList();
                this.satelliteData = JSON.parse(res);
            },
            drawStar(){
                //mark  1是区域，2是全球,
                //type  1是北斗2,2是北斗3
                //sv 对应type
                //snr 对应信噪比
                //elevation 对应ele
                //azimuth 对应azi
                // var data = this.satelliteData;
                // data.push({sv: 'G001', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2});
                // data.push({sv: 'G002', azi: 231, ele: 36, sn1: 43, sn2: 45, sn3: 45,type:1,mark:2});
                // data.push({sv: 'C1', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2});
                var data = [
                    {sv: 'G1', azi: 202, ele: 74, sn1: 50, sn2: 43, sn3: 0,type:2,mark:2},
                    {sv: 'G2', azi: 299, ele: 49, sn1: 53, sn2: 49, sn3: 0,type:1,mark:1},
                    {sv: 'G3', azi: 294, ele: 23, sn1: 45, sn2: 41, sn3: 0,type:1,mark:1},
                    {sv: 'G11', azi: 30, ele: 36, sn1: 51, sn2: 49, sn3: 0,type:2,mark:1},
                    {sv: 'G12', azi: 316, ele: 47, sn1: 51, sn2: 0, sn3: 0,type:1,mark:1},
                    {sv: 'G14', azi: 130, ele: 68, sn1: 47, sn2: 41, sn3: 0,type:2,mark:1},
                    {sv: 'G16', azi: 231, ele: 43, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                    {sv: 'G22', azi: 268, ele: 28, sn1: 45, sn2: 35, sn3: 0,type:2,mark:1},
                    {sv: 'G25', azi: 44, ele: 12, sn1: 31, sn2: 0, sn3: 27,type:1,mark:1},
                    {sv: 'G26', azi: 257, ele: 73, sn1: 52, sn2: 47, sn3: 43,type:2,mark:1},
                    {sv: 'G29', azi: 66, ele: 30, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                    {sv: 'G31', azi: 26, ele: 57, sn1: 50, sn2: 42, sn3: 0,type:2,mark:1},
                    {sv: 'G32', azi: 140, ele: 42, sn1: 48, sn2: 40, sn3: 41,type:1,mark:2},

                    {sv: 'G001', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2},
                    {sv: 'G002', azi: 231, ele: 36, sn1: 43, sn2: 45, sn3: 45,type:1,mark:2},
                    {sv: 'G004', azi: 121, ele: 33, sn1: 42, sn2: 45, sn3: 45,type:2,mark:2},
                    {sv: 'G005', azi: 251, ele: 15, sn1: 39, sn2: 43, sn3: 43,type:2,mark:2},
                    {sv: 'G006', azi: 186, ele: 50, sn1: 46, sn2: 45, sn3: 47,type:2,mark:2},
                    {sv: 'G007', azi: 330, ele: 68, sn1: 49, sn2: 49, sn3: 49,type:2,mark:2},
                    {sv: 'G009', azi: 233, ele: 67, sn1: 47, sn2: 47, sn3: 48,type:1,mark:2},
                    {sv: 'G0010', azi: 284, ele: 54, sn1: 47, sn2: 45, sn3: 47,type:2,mark:2},
                    {sv: 'G0014', azi: 313, ele: 17, sn1: 43, sn2: 47, sn3: 47,type:1,mark:2},  


                    {sv: 'C1', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2},
                    {sv: 'C2', azi: 231, ele: 36, sn1: 43, sn2: 45, sn3: 45,type:1,mark:2},
                    {sv: 'C3', azi: 294, ele: 23, sn1: 45, sn2: 41, sn3: 0,type:1,mark:1},

                    {sv: 'C4', azi: 121, ele: 33, sn1: 42, sn2: 45, sn3: 45,type:2,mark:2},
                    {sv: 'C5', azi: 251, ele: 15, sn1: 39, sn2: 43, sn3: 43,type:2,mark:2},
                    {sv: 'C6', azi: 186, ele: 50, sn1: 46, sn2: 45, sn3: 47,type:2,mark:2},
                    {sv: 'C7', azi: 330, ele: 68, sn1: 49, sn2: 49, sn3: 49,type:2,mark:2},
                    {sv: 'C10', azi: 284, ele: 54, sn1: 47, sn2: 45, sn3: 47,type:2,mark:2},
                    {sv: 'C11', azi: 30, ele: 36, sn1: 51, sn2: 49, sn3: 0,type:2,mark:1},
                    {sv: 'C12', azi: 316, ele: 47, sn1: 51, sn2: 0, sn3: 0,type:1,mark:1},
                    {sv: 'C13', azi: 299, ele: 49, sn1: 53, sn2: 49, sn3: 0,type:1,mark:1},
                    {sv: 'C14', azi: 313, ele: 17, sn1: 43, sn2: 47, sn3: 47,type:1,mark:2},
                    {sv: 'C16', azi: 231, ele: 43, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                    {sv: 'C22', azi: 268, ele: 28, sn1: 45, sn2: 35, sn3: 0,type:2,mark:1},  
                    {sv: 'C23', azi: 294, ele: 23, sn1: 45, sn2: 41, sn3: 0,type:1,mark:1},
                    {sv: 'C25', azi: 44, ele: 12, sn1: 31, sn2: 0, sn3: 27,type:1,mark:1},
                    {sv: 'C29', azi: 66, ele: 30, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                    {sv: 'C31', azi: 26, ele: 57, sn1: 50, sn2: 42, sn3: 0,type:2,mark:1},
                    {sv: 'C32', azi: 140, ele: 42, sn1: 48, sn2: 40, sn3: 41,type:1,mark:2},

                    {sv: 'R21', azi: 78, ele: 24, sn1: 48, sn2: 48, sn3: 0,type:2,mark:1},
                    {sv: 'R22', azi: 134, ele: 15, sn1: 48, sn2: 46, sn3: 0,type:1,mark:1}];
                this.satellite_found=[];
                this.satellite_use=[];
                this.satellite_bad=[];
                // 基于准备好的dom，初始化echarts实例
                this.myChartStar = this.$echarts.init(document.getElementById('myChartStar'));

                // 绘制图表
                for (var i=0;i<data.length;i++){
                    var geometry_x=data[i].ele;
                    var geometry_y=data[i].azi;
                    console.log(this.starType,data[i].type,this.starField,data[i].mark);
                    if(this.starType===0&&this.starField===0){
                        if(data[i].sv.indexOf('G')==0){
                            this.satellite_found.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('C')==0){
                            this.satellite_use.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('R')==0){
                            this.satellite_bad.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }
                    }else if(this.starField===0){
                        if(data[i].sv.indexOf('G')==0&&data[i].type==this.starType){
                            this.satellite_found.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('C')==0&&data[i].type==this.starType){
                            this.satellite_use.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('R')==0&&data[i].type==this.starType){
                            this.satellite_bad.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }
                    }else if(this.starType===0){
                        if(data[i].sv.indexOf('G')==0&&data[i].mark==this.starField){
                            this.satellite_found.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('C')==0&&data[i].mark==this.starField){
                            this.satellite_use.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('R')==0&&data[i].mark==this.starField){
                            this.satellite_bad.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }
                    }else{
                        if(data[i].sv.indexOf('G')==0&&data[i].type==this.starType&&data[i].mark==this.starField){
                            this.satellite_found.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('C')==0&&data[i].type==this.starType&&data[i].mark==this.starField){
                            this.satellite_use.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }else if(data[i].sv.indexOf('R')==0&&data[i].type==this.starType&&data[i].mark==this.starField){
                            this.satellite_bad.push([parseInt(geometry_x),parseInt(geometry_y)]);
                        }
                    }


                }

                this.myChartStar.setOption({
                    title: {
                        text: ''
                    },
                    legend: {
                        data: ['可看卫星', '可用卫星', '故障卫星']
                    },
                    polar: {
                        center: ['50%', '50%']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    angleAxis: {//极坐标系的角度轴
                        type: 'value',
                        min: 0,
                        max:360,
                        startAngle: 90,
                        clockwise: true, //是否逆时针
                        axisLine: { //坐标轴轴线设置
                            lineStyle: {
                                color: '#ccc',
                            }
                        },
                        axisTick: { //坐标轴刻度设置
                            show: true,
                        },
                        splitLine: { //分割线设置
                            show: true,

                        },
                        axisLabel: { //刻度标签设置
                            margin: 5, //刻度与坐标轴之间的距离
                            textStyle: {
                                color: '#333'
                            }
                        }
                    },
                    radiusAxis: {//极坐标系的径向轴。
                        min: 0,
                        max:90,
                        axisLine: { //坐标轴轴线设置
                            show: false,
                        },
                        axisTick: { //坐标轴刻度设置
                            show: false
                        },
                        axisLabel: { //刻度标签设置
                            margin: 5, //刻度与坐标轴之间的距离
                            textStyle: {
                                color: '#333'
                            }
                        }
                    },
                    series: [{
                        coordinateSystem: 'polar',
                        type: 'scatter',
                        name:'可看卫星',
                        showSymbol: false,
                        smooth: true,
                        data:this.satellite_found,
                        lineStyle: {
                            normal: {
                                color: '#f00'
                            }
                        }
                    }, {
                        coordinateSystem: 'polar',
                        type: 'scatter',
                        name:'可用卫星',
                        showSymbol: false,
                        smooth: true,
                        data:this.satellite_use, //蓝线数据参数
                        lineStyle: {
                            normal: {
                                color: '#0000ff'
                            }
                        }
                    }, {
                        coordinateSystem: 'polar',
                        type: 'scatter',
                        name:'故障卫星',
                        showSymbol: false,
                        smooth: true,
                        data: this.satellite_bad, //黄线数据参数
                        lineStyle: {
                            normal: {
                                color: 'goldenrod'
                            }
                        }
                    }],
                    animationDuration: 2000
                });
            },
        },
        mounted() {
            this.getAllStarInfo();
            this.drawStar();
        }
    };

</script>

<style scoped>
    .star-mes{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .star-mes .header{
        color: #ffffff;
        margin-bottom: 1rem;
        background-color: #153744;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }

    .star-mes .textHeader{
        background-color: #153744;
        color: #ffffff;
    }
    .star-mes .borderLeft{
        border-left: #ffffff 2px solid;
    }
    .star-mes .borderRight{
        border-right: #ffffff 2px solid;
    }
    /deep/  .van-grid-item__content {
        padding: 6px;
    }

    .star-mes .vant-header{
        margin: 0;
        line-height: 2rem;
        font-size: 1rem;
    }

    .otherbtnsbox {
        display: flex;
        height: 4rem;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        border: #153744 1px solid;

    }
    .otherbtnitem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem 0;
    }
    .otherbtnimg {
        height: 2rem;
        border-radius: 0.2rem;
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .otherbtnText{
        line-height: 1rem;
        font-size: 0.7rem;
    }

    .vant-table .table{
        text-align: center;
    }
    .vant-table .table .th {
        font-size: 0.8rem;
        line-height: 1.5rem;
        background-color: #173744;
        border-bottom: #ffffff 2px solid;
        color:  #ffffff;
        text-align: center;
    }
    .vant-table .table .list-tr {
        font-size: 0.8rem;
        line-height: 1.6rem;
    }
    .vant-table .table .list-tr:nth-child(2n) {
        background-color: rgba(21, 55, 68, 0.3);
        color:  #ffffff;
    }


    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }





</style>
